<template>
  <div class="container">
    <div class="app-container">
      <el-row>
        <el-button type="primary" size="small" @click="addPermission()">添加权限</el-button>
      </el-row>
      <el-table border row-key="id" :data="list">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button v-if="row.type === 1" size="mini" type="text" @click="add(row.id)">添加</el-button>
            <el-button size="mini" type="text" @click="editPermission(row)">编辑</el-button>
            <el-button size="mini" type="text" @click="delPermission(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form ref="permissionForm" :model="permissionForm" :rules="rules" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="permissionForm.name" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="permissionForm.code" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permissionForm.description" placeholder="请输入权限描述" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="permissionForm.enVisible"
            active-color="#13ce66"
            inactive-color="#DCDFE6"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center" style="margin-top: 40px;">
        <template>
          <el-button size="small" @click="handleCancel">取消</el-button>
          <el-button size="small" type="primary" @click="handleConfirm()">确定</el-button>
        </template>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { addpermissionListAPI, delpermissionListAPI, editpermissionListAPI, getpermissionListAPI, setpermissionListAPI } from '@/api'
import { transListToTreeData } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      title: '新增权限点',
      list: [],
      dialogVisible: false,
      permissionForm: {
        name: '',
        code: '',
        description: '',
        enVisible: 0,
        pid: '',
        type: '',
        id: null
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      this.list = transListToTreeData(await getpermissionListAPI(), 0)
      console.log(this.list) // 确保数据正确
      // this.list = data
    },
    // 11
    add(pid) {
      this.permissionForm.type = 0
      this.permissionForm.pid = pid
      this.dialogVisible = true
    },
    // 添加权限
    addPermission() {
      this.permissionForm.pid = 0
      this.permissionForm.type = 1
      this.dialogVisible = true
    },
    // 整体校验 -------- 添加
    async handleConfirm() {
      // 整体校验
      await this.$refs.permissionForm.validate().then(() => {

      })
      if (!this.permissionForm.id) {
        // 一点确定是执行页面路由权限点还是按钮权限点需要用什么判断
        await addpermissionListAPI(this.permissionForm)
        this.$message.success('新增成功')
        this.getPermissionList()
        this.handleCancel()
      } else {
        // 执行编辑功能的请求
        await editpermissionListAPI(this.permissionForm)
        this.$message.success('编辑成功')
        this.getPermissionList() // 渲染列表
        this.dialogVisible = false
      }
    },
    // 取消事件
    handleCancel() {
      this.$refs.permissionForm.resetFields()
      this.dialogVisible = false
      this.permissionForm = {
        name: '',
        code: '',
        description: '',
        enVisible: 0,
        pid: '',
        type: ''
      }
    },
    // 删除
    async delPermission(id) {
      await this.$confirm('确定删除吗')
      await delpermissionListAPI(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    },
    // 编辑
    async editPermission(row) {
      this.title = '编辑权限点'
      this.dialogVisible = true
      this.permissionForm = await setpermissionListAPI(row.id)
    }
  }
}
</script>

<!-- ### 思路文档

#### 1. 功能概述

本组件是一个权限管理页面，提供添加、编辑和删除权限的功能。页面包含一个表格，展示权限的名称、标识、描述和操作按钮（添加、编辑、删除）。

#### 2. 组件结构

- **模板部分 (`<template>`)**:
  - 一个按钮，点击调用 `addPermission()` 方法，显示添加权限的对话框。
  - 一个表格，展示权限列表，每个权限行包含操作按钮，分别调用 `add(row.id)`、`editPermission(row)` 和 `delPermission(row.id)` 方法。
  - 一个对话框，用于添加或编辑权限，包含权限名称、标识、描述和开启状态的表单。

- **脚本部分 (`<script>`)**:
  - 数据定义：`list` 存储权限列表，`dialogVisible` 控制对话框显示，`permissionForm` 是表单数据，`rules` 是表单验证规则。
  - 生命周期钩子：`created` 中调用 `getPermissionList()` 获取权限列表并转换为树形结构。
  - 方法定义：包括获取权限列表、添加权限、编辑权限、删除权限和表单操作方法。

#### 3. 问题识别与解决

- **API调用问题**:
  - 将 `editPermission(row)` 中的 `setpermissionListAPI(row.id)` 改为 `getPermissionDetailAPI(row.id)`。
  - 确保所有API函数定义正确，路径和参数无误。

- **表单数据处理**:
  - 在 `editPermission(row)` 中，确保API返回的数据包含 `id` 字段，并赋值给 `permissionForm`。
  - 在 `handleConfirm()` 中，确保 `permissionForm` 包含 `id` 字段，并在调用 `editpermissionListAPI` 时传递正确参数。

- **代码逻辑问题**:
  - 修正 `add(pid)` 方法中的 `type` 值，确保符合接口定义（1或2）。
  - 确认 `addPermission()` 方法中 `type` 和 `pid` 设置正确。

- **表单验证**:
  - 使用 `await this.$refs.permissionForm.validate()` 替代 `.then()`，确保验证通过后再进行后续操作。

- **代码规范和注释**:
  - 添加注释说明每个方法的功能和参数。
  - 优化变量命名，提高代码可读性。

#### 4. 代码优化与测试

- **优化代码结构**:
  - 确保方法和变量命名清晰，代码逻辑明确。
  - 添加适当的注释，提高代码可维护性。

- **功能测试**:
  - **添加权限**: 点击“添加权限”按钮，填写表单，点击确定，检查是否成功添加并显示在表格中。
  - **编辑权限**: 点击表格中的“编辑”按钮，修改表单内容，点击确定，检查是否成功更新权限信息。
  - **删除权限**: 点击表格中的“删除”按钮，确认删除，检查是否成功从列表中移除。

- **网络请求检查**:
  - 使用浏览器开发者工具检查网络请求，确保请求参数正确，响应数据正常。

- **异常处理**:
  - 在API调用中添加错误处理，捕获和显示错误信息。
  - 确保在表单验证失败时，不会进行API调用。

#### 5. 结论

通过以上步骤，我们修正了代码中的错误，并确保权限管理功能正常工作。代码的可读性和可维护性得到提升，功能测试通过，网络请求和异常处理也得到了优化。 -->
